<template>
   <a href="index.html"><span class="logonImg"><img src="img/left.jpg"></span></a>
  <!-- 注册 -->
   <a class="a" href="zhuce.html">注册</a>
   <!-- logo -->
  <div class="home"><img src="img/homelogo.png"></div>
  <!-- 登录部分 -->
  <div class="logonMid">
      <div><img src="img/human.png"><input class="txt" type="text" placeholder="请输入账号" maxlength="10"><span></span></div>
      <div><img src="img/lock.png"><input class="pwd" type="password" placeholder="请输入密码" maxlength="18"></div>
      <a href="###">忘记密码?</a>
      <div class="btn" @touchstart="login()">登录</div>
  </div>
</template>

<script>
export default {
   ready:function(){
  localStorage.clear();
 },
  methods:{
    //登录
     login:function() {
        var $pwd = $(".pwd");
        var $txt = $(".txt");
    // 判断登陆正则
    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？%+_]"); 
      if(pattern.test($txt.val())){
          alert("用户名不能含有特殊字符");
          $txt.focus();
          return;
      }else if ($txt.val()=="") {
        $txt.focus();
        alert("用户名不能为空");
        return;
      }else if ($pwd.val()=="") {
        alert("请输入密码");
        $pwd.focus();
        return;
      }else {
        // ajax请求 数据库 判断账号密码 是否正确
        $.ajax({
          type:"GET",
          url: "http://172.16.18.39/login/login.php",
          data:{type:"Login",name:$txt.val(),pwd:$pwd.val()},
          dataType:"jsonp",
          jsonp:"cb",
          success:function(data){
            if (data.error==0) {
              //获取登陆成功的用户名 存储进本地存储
              console.log(data.name);
              localStorage.setItem("username",data.name);
              alert('登录成功');
              //转跳到我的登陆界面
              location.href="/me.html";
            }else{
              alert("用户名或密码错误");
            }
          }
        })
      }
     }
  }
}
</script>
<style scoped>
.logonImg{
     display: inline-block;
    position: fixed;
    top: 1.5%;
    width: 5%;
    left: 2%;
    z-index:1888;
}
  .logonImg img{
    width:100%;
  }
  /*注册*/
  .a{
    color: white;
    position: fixed;
    top:1.5%;
    right: 5%;
    font-size: .16rem;
     z-index:1888;
  }
  /*logo*/
  .home{
    margin-top:5%; 
    width: 100%;
    text-align: center;
  }
  .home img{
    width: 40%;
  }
  /*登录部分*/
  .logonMid{
    margin-top:4%; 
    width: 100%;
  }
  .logonMid div{
    width: 85%;
    margin: 0.1rem auto;
    margin-bottom: 0;
    height: 0.4rem;
    line-height:0.4rem;
    border:1px solid #dbdbdb;
    border-radius: 5px;
    background-color: white; 
  }
  .logonMid div:nth-child(1) img{
      position: relative;
      top: -.02rem;
      left: 5%;
  }
  .logonMid div:nth-child(2) img{
      position: relative;
      top: -.02rem;
      left: 5%;
  }
  /*输入框*/
  .logonMid div input{
      width: 70%;
      outline:none;
      border:none;
      margin-left:10%;
  }
  /*忘记密码*/
  .logonMid a{
    margin-top:1%; 
    color: #f2ac63;
    position: absolute;
    right: 7.5%;
  }
  /*登录按钮*/
  .logonMid .btn{
    margin-top: 15%;
    background-color: #f29004;
    text-align: center;
    color: white;
    font-size: 12px;
  }
</style>
